<template>
  <div class="discover-view">
    <!-- 分类标签导航 -->
    <div class="category-tabs">
      <div class="tabs-container">
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="tab-item"
          :class="{ active: activeCategory === category.id }"
          @click="setActiveCategory(category.id)"
        >
          {{ category.name }}
        </div>
      </div>
    </div>
    
    <!-- 帖子瀑布流 -->
    <div class="posts-container">
      <!-- 帖子网格 -->
      <div class="posts-grid">
        <PostCard 
          v-for="post in displayPosts" 
          :key="post.id"
          :post="post"
          class="post-item"
          @preview="handlePreview"
        />
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore && !isLoading" class="load-more">
        <el-button @click="loadMorePosts" type="primary" plain>
          加载更多
        </el-button>
      </div>
      
      <!-- 加载状态 -->
      <div v-if="isLoading" class="loading">
        <el-icon class="is-loading"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
      
      <!-- 没有更多内容 -->
      <div v-if="!hasMore && displayPosts.length > 0" class="no-more">
        <span>没有更多内容了</span>
      </div>
      
      <!-- 空状态 -->
      <div v-if="!isLoading && displayPosts.length === 0" class="empty-state">
        <el-empty description="暂无内容" />
      </div>
    </div>

    <!-- 帖子预览弹窗 -->
    <PostPreview
      v-model:visible="previewVisible"
      :post-id="currentPostId"
      @refresh="loadPosts"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { usePostStore } from '@/store/post'
import PostCard from '@/components/common/PostCard.vue'
import PostPreview from '@/components/common/PostPreview.vue'
import { Loading } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const postStore = usePostStore()

// 定义分类
const categories = ref([
  { id: 'recommended', name: '推荐' },
  { id: 'hot', name: '热门' },
  { id: 'food', name: '美食' },
  { id: 'travel', name: '旅行' },
  { id: 'fashion', name: '穿搭' },
  { id: 'beauty', name: '美妆' },
  { id: 'lifestyle', name: '生活' }
])

const activeCategory = ref('recommended')
const previewVisible = ref(false)
const currentPostId = ref(null)

// 从store获取数据
const discoverPosts = computed(() => postStore.discoverPosts)
const isLoading = computed(() => postStore.isLoading)
const hasMore = computed(() => postStore.hasMore)

// 当前显示的帖子
const displayPosts = computed(() => {
  if (activeCategory.value === 'recommended') {
    return discoverPosts.value
  }
  // 根据分类筛选帖子
  return discoverPosts.value.filter(post => 
    post.tags && post.tags.includes(activeCategory.value)
  )
})

// 设置活动分类
const setActiveCategory = (categoryId) => {
  activeCategory.value = categoryId
  // 重置分页并重新加载数据
  postStore.resetPosts()
  loadPosts()
}

// 加载帖子
const loadPosts = async () => {
  try {
    await postStore.fetchDiscoverPosts({
      category: activeCategory.value
    })
  } catch (error) {
    console.error('加载帖子失败:', error)
    ElMessage.error('加载帖子失败')
  }
}

// 加载更多帖子
const loadMorePosts = () => {
  if (!isLoading.value && hasMore.value) {
    loadPosts()
  }
}

// 处理帖子预览
const handlePreview = (postId) => {
  currentPostId.value = postId
  previewVisible.value = true
}

// 组件挂载时加载数据
onMounted(() => {
  postStore.resetPosts()
  loadPosts()
})
</script>

<style lang="scss" scoped>
.discover-view {
  .category-tabs {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    .tabs-container {
      display: flex;
      gap: 32px;
      overflow-x: auto;
      
      &::-webkit-scrollbar {
        height: 4px;
      }
      
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
      }
      
      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 2px;
        
        &:hover {
          background: #a8a8a8;
        }
      }
      
      .tab-item {
        padding: 8px 16px;
        border-radius: 20px;
        cursor: pointer;
        font-size: 14px;
        color: #666;
        white-space: nowrap;
        transition: all 0.2s ease;
        
        &:hover {
          color: #333;
          background-color: #f5f5f5;
        }
        
        &.active {
          color: #ff2442;
          background-color: #fff5f6;
          font-weight: 500;
        }
      }
    }
  }
  
  .posts-container {
    .posts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 24px;
      margin-bottom: 32px;
      
      .post-item {
        width: 100%;
      }
    }
    
    .load-more {
      text-align: center;
      margin: 32px 0;
    }
    
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 40px;
      color: #999;
      font-size: 14px;
      
      .el-icon {
        font-size: 20px;
      }
    }
    
    .no-more {
      text-align: center;
      padding: 40px;
      color: #999;
      font-size: 14px;
    }
    
    .empty-state {
      padding: 60px 20px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .discover-view {
    .category-tabs {
      .tabs-container {
        gap: 20px;
        
        .tab-item {
          padding: 6px 12px;
          font-size: 13px;
        }
      }
    }
    
    .posts-container {
      .posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
      }
    }
  }
}
</style>